<template>
  <div class="dialog-form">
    <!-- 添加或修改弹出框 -->
    <el-dialog
      :title="title"
      center
      :visible.sync="open"
      @close="close(false)"
      width="60%"
      append-to-body
    >
      <div class="discountReceipt-pick-operate-box">
        <el-tabs v-model="curActive" @tab-click="tabChange">
          <el-tab-pane
            :label="$t('batch.systemConfig.form.basicInfo')"
            name="base"
          >
            <!-- 基本信息 -->
            <el-form
              ref="editForm"
              :model="editForm"
              :rules="rules"
              label-width="110px"
            >
              <el-form-item
                :label="$t('batch.systemConfig.form.sysName')"
                prop="sysName"
              >
                <el-input
                  v-model="editForm.sysName"
                  :placeholder="$t('batch.missionManage.rules.pleaseEnter')"
                  :disabled="disabled"
                />
              </el-form-item>
              <el-form-item
                :label="$t('batch.systemConfig.form.sysCode')"
                prop="sysCode"
              >
                <el-input
                  v-model="editForm.sysCode"
                  :placeholder="$t('batch.missionManage.rules.pleaseEnter')"
                  :disabled="disabled || (id ? true : false)"
                />
              </el-form-item>
              <el-form-item
                :label="$t('batch.systemConfig.form.sysConnType')"
                prop="sysConnType"
              >
                <el-select
                  :disabled="disabled"
                  v-model="editForm.sysConnType"
                  :placeholder="$t('batch.missionManage.rules.pleaseSelect')"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dictMap.sys_conn_type"
                    :key="item.value"
                    :label="item.text"
                    :value="Number(item.value)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('common.remark')" prop="remark">
                <el-input
                  v-model="editForm.remark"
                  :disabled="disabled"
                  :placeholder="$t('batch.missionManage.rules.pleaseEnter')"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            :label="$t('batch.systemConfig.form.sysParam')"
            name="params"
            v-if="id ? true : false"
          >
            <div class="operate-box-bottom">
              <div class="bottom-content">
                <!-- 系统参数 -->
                <kv-config
                  :disabled="disabled"
                  :paramType="1"
                  paramKey="1"
                  ref="paramsTable"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer align-right">
        <el-button type="primary" @click="submitForm" v-if="!disabled">{{
          $t("common.confirm")
        }}</el-button>
        <el-button @click="close">{{ $t("common.cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  get,
  save,
  update,
  checkSysCodeUnique,
  checkSysNamenique,
} from "@/api/batch_app/systemConfig";
import { dialogMixin } from "@/libs/dialogMixin";
import KvConfig from "@/views/batch/components/kvConfig";

export default {
  name: "EditSystemConfig",
  components: { KvConfig },
  mixins: [dialogMixin],
  data() {
    // 表单校验
    let checkSysCodeUniqueRule = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("batch.systemConfig.rules.cannotEmpty")));
      } else {
        checkSysCodeUnique({
          sysCode: value,
          id: this.editForm.id,
        }).then((response) => {
          var result = response.result;
          if (!result) {
            callback(
              new Error(this.$t("batch.systemConfig.rules.alreadyExists"))
            );
          } else {
            callback();
          }
        });
      }
    };

    let checkSysNameniqueRule = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("batch.systemConfig.rules.cannotEmpty")));
      } else {
        checkSysNamenique({
          sysName: value,
          id: this.editForm.id,
        }).then((response) => {
          var result = response.result;
          if (!result) {
            callback(
              new Error(this.$t("batch.systemConfig.rules.alreadyExists"))
            );
          } else {
            callback();
          }
        });
      }
    };
    return {
      id: "",
      disabled: false,
      curActive: "base",
      // extendMap: {},
      rules: {
        sysName: [
          { required: true, trigger: "blur", validator: checkSysNameniqueRule },
        ],
        sysCode: [
          {
            required: true,
            trigger: "blur",
            validator: checkSysCodeUniqueRule,
          },
        ],
        sysConnType: [
          {
            required: true,
            message: this.$t("batch.systemConfig.rules.mustChoose"),
            trigger: "blur",
          },
        ],
        remark: [
          {
            max: 256,
            message: this.$t("batch.systemConfig.rules.maxLength256"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    // 此处做数据字典数据加载初始化操作
    this.loadDicts(["sys_conn_type", "sys_conf_kv_key"]);
  },
  methods: {
    show(id = "", disabled = false, tab = "base") {
      this.$set(this, "editForm", {});
      this.id = id;
      this.disabled = disabled;
      this.curActive = tab;
      this.title = this.$t("common.edit");
      if (id) {
        // 查询配置详情
        get({
          id: id,
        }).then((res) => {
          this.$set(this, "editForm", res.result);
          this.open = true;
          if (tab == "params") {
            this.$nextTick(() => {
              this.$refs.paramsTable.loadData(this.id);
            });
          }
        });
      } else {
        this.open = true;
        this.title = this.$t("common.add");
      }
    },
    tabChange(e) {
      // 如果切换到 配置参数并且是修改的情况 则加载数据
      if (e.paneName == "params" && this.id) {
        this.$refs.paramsTable.loadData(this.id);
      }
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            delete this.editForm.createTime;
            delete this.editForm.updateTime;
            update(this.editForm).then((res) => {
              this.msgSuccess(this.$t("common.modifySuccess"));
              this.close(true);
            });
          } else {
            delete this.editForm.createTime;
            delete this.editForm.updateTime;
            save(this.editForm).then((res) => {
              this.msgSuccess(this.$t("common.addSuccess"));
              this.close(true);
            });
          }
        }
      });
    },
    // 取消按钮
    close(state = false) {
      this.open = false;
      this.resetForm("editForm");
      if (state) this.$emit("editComplete", state);
    },
  },
};
</script>

<style scoped>
</style>

